<template>
    <el-select
      v-model="value"
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      @change='change'
      :loading="loading">
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
  </template>
  
  <script>
      import axios from 'axios'
    export default {
      data() {
        return {
          options: [],
          value: '',
          loading: false,
          pageNo:1,
          pageSize:10,
        }
      },
      model: {
        event: 'change',
        prop: 'value'
      },
      props:['value'],
      mounted() {
      },
      watch:{
        value(v){
            debugger
        }
      },
      methods: {
        remoteMethod(query) {
          if (query !== '') {
            this.loading = true;
            axios.get('/bird-system/sentence/birdInfo/list',{
                params:{
                    birdName: query
                }
            }).then(res=>{
                this.loading = false;
                this.options = res.data.result
            })
            // setTimeout(() => {
            //   this.loading = false;
            //   this.options = this.list.filter(item => {
            //     return item.label.toLowerCase()
            //       .indexOf(query.toLowerCase()) > -1;
            //   });
            // }, 200);
          } else {
            this.options = [];
          }
        },
        change(v) {
            let data = this.options.filter(item => item.id ===v)
            this.$emit('change',v,data)
        }
      }
    }
  </script>